<template>
  <el-tabs v-model="tab">
    <el-tab-pane label="分销商信息" name="basic">
      <div class="alert alert-dashed mgb20">
        <span class="h2">分销商状态: {{DtbStatus[dtb.status]}}</span>
        <div class="actions" v-if="dtb.id">
          <el-button type="primary" :loading="dtb.updating" @click="updateDtb()">更新信息</el-button>
          <el-button v-if="dtb.status != 2" type="success" @click="review(true)">启用分销商</el-button>
          <el-button v-if="dtb.status != 3" type="danger" @click="review(false)">关闭分销商</el-button>
        </div>
      </div>
      <el-form ref="dtbForm" :rules="dtbRules" :model="dtb" label-position="right" label-width="90px">
        <el-form-item prop="name" label="企业类型:">
          <el-radio-group v-model="dtb.dtbType">
            <el-radio :label="1">公司</el-radio>
            <el-radio :label="2">个人</el-radio>
            <el-radio :label="3">Test</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="25">
          <el-col :span="10">
            <el-form-item prop="name" label="企业名称:">
              <el-input v-model="dtb.name" />
            </el-form-item>
            <el-form-item prop="shortName" label="企业简称:">
              <el-input v-model="dtb.shortName" />
            </el-form-item>
            <el-form-item prop="email" label="业务邮箱:">
              <el-input v-model="dtb.email" />
            </el-form-item>
            <el-form-item prop="lang" label="国际化:">
              <el-select v-model="dtb.lang" placeholder="选择国际化语言">
                <el-option v-for="(value, key) in Lang" :key="key" :label="value" :value="key"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="logo" label="logo:">
              <el-upload :action="apiBaseUrl + '/upload/dtb/logo'" 
                :multiple="false" :show-file-list="false" :headers="authTokenHeader"
                :on-success="onLogoUploadSuccess" :before-upload="beforeLogoUpload" accept="image/*">
                <img v-if="dtb.logo" :src="dtb.logo" class="dtb-logo-preview">
                <el-button size="small" class="upload-btn">
                  <i class="el-icon-upload"></i> 上传
                </el-button>
                <div slot="tip" class="upload-tips">
                  jpg/png文件, 大小500kb以内, 像素150×90以内
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item prop="servicePhone" label="客服电话:">
              <el-input v-model="dtb.servicePhone" />
            </el-form-item>
            <el-form-item prop="addr" label="办公地址:">
              <el-input v-model="dtb.addr" />
            </el-form-item>
            <el-form-item prop="webSite" label="网站地址:">
              <el-input v-model="dtb.webSite" />
            </el-form-item>
            <el-form-item prop="bio" label="公司简介:">
              <el-input type="textarea" :rows="4" v-model="dtb.bio" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="分销设置" name="setting">
      <keep-alive>
        <dtb-setting v-if="tab=='setting'" :dtbId="dtb.id" />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="账务信息" name="balance">
      <keep-alive>
        <dtb-balance v-if="tab=='balance'" :fetchBalanceMethod="getBalance" :fetchBalanceDetailsMethod="getBalanceDetails" />
      </keep-alive>
    </el-tab-pane>
    <el-tab-pane label="帐号信息" name="account">
      <keep-alive>
        <dtb-account v-if="tab=='account'" :dtbId="dtb.id" />
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import DtbBalance from '@/components/dtb/balance'
import DtbAccount from '@/components/dtb/account'
import DtbSetting from '@/components/dtb/setting'
import { Dtb, Balance, Header } from '@/store/api'
import * as Constants from '@/constants'
import { isLegalFile } from '@/utils/validator'
import Env from '@/env'

export default {
  components: {
    DtbBalance,
    DtbAccount,
    DtbSetting
  },
  data() {
    return {
      ...Env,
      ...Constants,
      authTokenHeader: Header.authToken(),
      tab: 'basic',
      dtb: {
        dtbType: 1,
        logo: null,
        lang: 'zh-cn',
        updating: false
      },
      dtbRules: {
        dtbType: [
          { required: true, message: '请选择企业类型', trigger: 'blur' }
        ],
        name: [
          { max: 64, message: '长度不能超过64', trigger: 'blur' }
        ],
        shortName: [
          { required: true, message: '简称不能为空', trigger: 'blur' },
          { max: 16, message: '长度不能超过16', trigger: 'blur' }
        ],
        addr: [
          { max: 128, message: '长度不能超过128', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '不是正确的邮箱地址', trigger: 'blur' },
          { max: 32, message: '长度不能超过32', trigger: 'blur' }
        ],
        servicePhone: [
          { min: 7, max: 16, message: '请填写正确的手机/固话', trigger: 'blur' }
        ],
        webSite: [
          { max: 128, message: '长度不能超过128', trigger: 'blur' }
        ],
        bio: [
          { max: 1024, message: '长度不能超过1024', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // load dtb
    Dtb.get(this.$route.query.dtbId).then(dtb => {
      this.dtb = Object.assign({}, this.dtb, dtb || {})
    })
  },
  methods: {
    onLogoUploadSuccess(response, file) {
      if (response && response.code && response.code === 200) {
        this.dtb.logo = response.data
      }
    },
    beforeLogoUpload(file) {
      return isLegalFile(file, ['image/png', 'image/jpeg'], '500K')
    },
    updateDtb() {
      this.$refs['dtbForm'].validate(valid => {
        if (valid) {
          this.dtb.updating = true
          const payload = Object.assign({}, this.dtb)
          Dtb.update(payload).then((dtb) => {
            this.dtb.updating = false
            this.$notify.success({
              title: '操作成功',
              message: '分销信息已更新',
              offset: 220,
              duration: 2000
            })
            Object.assign(this.dtb, dtb)
          }).catch(() => {
            this.dtb.updating = false
          })
        } else {
          return false
        }
      })
    },
    getBalance() {
      return Balance.get(this.dtb.id)
    },
    getBalanceDetails(query) {
      return Balance.details(query)
    },
    review(approved, remark) {
      Dtb.review(this.dtb.id, approved, remark).then((dtb) => {
        this.dtb.status = dtb.status
        this.$notify.success({
          title: '操作成功',
          message: '分销商状态已更新为' + this.DtbStatus[dtb.status],
          offset: 200,
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="css" scoped>
.upload-btn {
  vertical-align: top;
}

.dtb-logo-preview {
  border: 1px dashed #20a0ff;
  margin-right: 8px;
  max-width: 100%;
}

.upload-tips {
  font-size: 12px;
  color: rgb(131, 145, 165);
  line-height: 20px;
}
</style>
